<template>
	<view class="g-register-main">
		<view class="g-form-main">
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_iphone.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="number" v-model="dataForm.phone" maxlength="11" placeholder="请输入手机号" class="f-f1" placeholder-style="color: #C5C5C5" />
			</view>
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_msg.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="number" v-model="dataForm.message" placeholder="请输入短信验证码" class="f-f1" placeholder-style="color: #C5C5C5" />
				<send-msg-btn :phone="dataForm.phone"></send-msg-btn>
			</view>
			<view class="u-form-item f-frowceny f-fz14 f-fc-inp">
				<image src="../../static/icon/user/icon_psw_grey.png" mode="aspectFit" class="icon f-mr10"></image>
				<input type="password" v-model="dataForm.password" placeholder="请输入密码,长度6-20位" class="f-f1" placeholder-style="color: #C5C5C5" />
			</view>
		</view>
		<button class="u-register-btn u-btn-primary f-fz16 f-fc-whilte f-fw650 f-bdr-scircle" :disabled="disabled" @tap="submitForm">确 认</button>
	</view>
</template>

<script>
import userApi from '../../api/user.js';
import submitFormMix from '../../mixins/submit.js';
import MD5Util from '../../libs/md5.js';
export default {
	mixins: [submitFormMix],
	data() {
		return {
			dataForm: {
				phone: '',
				message: '',
				password: ''
			},
			rules: [
				{
					name: 'phone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号', '请输入正确的手机号']
				},
				{
					name: 'message',
					rule: ['required'],
					msg: ['请输入短信验证码']
				},
				{
					name: 'password',
					rule: ['required', 'isEnAndNo'],
					msg: ['请输入密码', '密码必须是8~20位数字和字母组合']
				}
			]
		};
	},
	methods: {
		submitForm(callBack) {
			const that = this;
			let params = that.deleteProperty(that.dataForm, ['message']);
			params.password = MD5Util.hexMD5(params.password);
			userApi
				.editPsw(params)
				.then(res => {
					uni.showToast({
						icon: 'success',
						title: '修改成功',
						mask: true,
						duration: 1000
					});
					that.throttle(()=> {
						uni.navigateBack();
					}, null, 1000, null);
					callBack();
				})
				.catch(() => {
					callBack();
				});
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
$width: 640rpx;
.g-register-main {
	padding-top: 100rpx;
	.g-form-main {
		.u-form-item {
			width: $width;
			height: 96rpx;
			margin: 26rpx auto 0;
			border-bottom: 2rpx solid #e7e7e7;
			.icon {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.u-register-btn {
		width: $width;
		margin-top: 120rpx;
	}
}
</style>
